<template>
  <div class="root base-background-img">
    <div class="title">
      <img src="~@/assets/magic/title.png">
    </div>
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/ar/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/">
        <img src="~@/assets/ar/common/back.png">
      </router-link>
    </div>
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/images/common/right.png">
    </div>
    <div class="konglong">
      <img src="~@/assets/magic/konglong.png">
    </div>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
import xiaoban from './xiaoban'
import zhongban from './zhongban'
import daban from './daban'
import jieriwenhua from './jieriwenhua'
export default {
  name: 'base',
  data () {
    return {
      currentIndex: 1,
      currentView: 'index1'
    }
  },
  components: {
    'index1': xiaoban,
    'index2': zhongban,
    'index3': daban,
    'index4': jieriwenhua
  },
  created () {
    let that = this
    console.log(that.$route)
    console.log(that.$route.query)
    console.log(that.$route.query.component)
    if (that.$route.query.component === '') {
      that.currentView = 'index1'
    } else if (that.$route.query.component !== undefined) {
      that.currentView = that.$route.query.component
      this.currentIndex = parseInt(that.$route.query.component.substr(-1))
    }
  },
  methods: {
    toggleTabs: function (func) {
      if (func === 'add') {
        if (this.currentView !== 'index4') {
          this.currentIndex = this.currentIndex + 1
          this.currentView = 'index' + this.currentIndex
        }
      } else {
        if (this.currentView !== 'index1') {
          this.currentIndex = this.currentIndex - 1
          this.currentView = 'index' + this.currentIndex
        }
      }
    }
  }
}
</script>

<style scoped>
.root {
  background: url('~@/assets/magic/bg.jpg');
  width: 1280px;
  height: 720px;
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.root > div {
  position: absolute; 
}
.title {
  left: 460px;
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.left {
  z-index: 10;
  top: 330px;
  left: 118px;
}
.right {
  z-index: 10;
  top: 330px;
  left: 1135px;
}
.konglong {
  top:530px;
  right:80px;
}
</style>
